import React, { useReducer,useState } from 'react';
import { List, InputItem, Button, NavBar } from 'antd-mobile';
import { initState, reducer, actions } from './user';
import { Toast } from 'antd-mobile';
import "./Login.less";
import { reqlogin } from '../../http/api';

export default function Login(props) {
    const [user, setuser] = useState({
        phone: '',
        password: ''
    })
    const [state, dispatch] = useReducer(reducer, initState)


    // 登录逻辑
    const login=()=>{
        // 发请求
        reqlogin(user).then(res=>{
            if (res.data.code===200) {
                Toast.info(res.data.msg)
                // 存入仓库
                dispatch(actions.changeInfo(res.data.list));
                // 跳转页面
                props.history.replace("/index/home")
            }
        })
    }


    return (
        <div className="login">
            <div>{JSON.stringify(user)}</div>
            <NavBar className="nav" mode="dark">登录</NavBar>
            <div>
                <InputItem
                    clear
                    placeholder="请输入手机号"
                    onChange={(val) => setuser({...user,phone:val})}
                >手机号</InputItem>
                <InputItem
                    clear
                    placeholder="请输入密码"
                    onChange={(val) => setuser({...user,password:val})}
                >密码</InputItem>
                <List.Item>
                    <div>
                        <Button className="btn" type="primary" onClick={() => login()}>登录</Button>
                    </div>
                </List.Item>
            </div>
        </div>
    )
}
